<template>
  <view>
    <uni-section title="课程评价" type="line">
      <view class="uni-padding-wrap uni-common-mt">
        <uni-segmented-control :current="current" :values="items" :style-type="styleType" :active-color="activeColor"
          @clickItem="onClickItem" />
      </view>
      <view class="content">
        <view class="charts-box" v-if="current === 0">
          <!--    <qiun-data-charts type="line" :opts="line_opts" :chartData="chartData_data4" /> -->
          <qiun-data-charts type="column" :opts="column_opts" :chartData="chartData_data4" :ontouch="true"
            :canvas2d="true" />
        </view>
        <view class="charts-box2" v-if="current === 1">
          <qiun-data-charts type="column" :opts="column_opts" :localdata="localdata_data1" :ontouch="true"
            :canvas2d="true" :enableMarkLine="true" />
        </view>
      </view>
    </uni-section>

    <uni-section title="分数区间所占人数" type="line">
      <view class="uni-padding-wrap uni-common-mt">
        <qiun-data-charts type="line" :opts="line_opts" :chartData="chartData_data2" />
      </view>
    </uni-section>

    <uni-section title="课程目标达成度对比" type="line">
      <view class="uni-padding-wrap uni-common-mt">
        <qiun-data-charts type="column" :opts="column_opts" :chartData="chartData_data5" :enableScroll="false" />
      </view>
    </uni-section>
  </view>
</template>

<script>
  export default {
    name: "my-tb1",
    props: {
      myproject: {
        type: String,
        defaul: '',
      },
    },
    data() {
      return {
        canvasId_data: '3f3234dfg6', //这里定义一个十位数的字符串 canvas2d="false"开启后微信开发者工具会出现层级过高问题但在手机浏览时不会出现这个问题注意
        data_test: [],
        // 柱状图1数据
        localdata_data1: [],
        // 柱状图4数据
        chartData_data4: {},
        // 折线图数据data2
        chartData_data2: {},
        // 柱状图5数据
        chartData_data5: {},

        column_opts: {
          color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
          padding: [15, 15, 0, 5],
          touchMoveLimit: 60,
          enableScroll: true,
          fontSize: 10,
          legend: {},
          xAxis: {
            disableGrid: true,
            scrollShow: true,
            itemCount: 15,
            fontSize: 10,
            titleFontSize: 10,
            rotateLabel: true,
            rotateAngle: 45
          },
          yAxis: {
            data: [{
              min: 0
            }]
          },
          extra: {
            column: {
              type: "group",
              width: 10,
              activeBgColor: "#000000",
              activeBgOpacity: 0.08
            },
            markLine: {
              data: [{
                value: 21,
                showLabel: true
              }]
            }
          },

        },
        line_opts: {
          color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
          padding: [15, 10, 0, 15],
          enableScroll: false,
          legend: {},
          xAxis: {
            disableGrid: true,
            fontSize: 10,
            titleFontSize: 10,
            rotateLabel: true,
            rotateAngle: 45
          },
          yAxis: {
            gridType: "dash",
            dashLength: 2,
          },
          extra: {
            line: {
              type: "curve",
              width: 2,
              activeType: "hollow"
            }
          }
        },
        // 选择框数据
        items: ['评价各项', '评价总分'],
        styles: [{
            value: 'button',
            text: '按钮',
            checked: true
          },
          {
            value: 'text',
            text: '文字'
          }
        ],
        colors: ['#007aff', '#4cd964', '#dd524d'],
        current: 0,
        colorIndex: 0,
        activeColor: '#007aff',
        styleType: 'button'

      };
    },
    onReady() {
      this.getServerData();
    },
    methods: {
      async getServerData() {
        console.log(this.$props)
        const {
          data: res
        } = await uni.$http.get('?command=pj1245echarts&project=' + this.$props.myproject)
        // https://p270947p9.zicp.fun/mimsmobile/mimsmob.php?command=pj1245charts&project=1640654903
        // console.log(res)
        // 柱状图1
        this.localdata_data1 = JSON.parse(JSON.stringify(res.data.data1));
        // console.log(this.localdata_data1)
        // 柱状图2
        // this.data_test.data.forEach((item, index) => { //js遍历数组
        //   this.localdata.push({
        //     value: item[1],
        //     text: item[0],
        //   })
        // })
        // console.log(this.localdata)
        // this.chartData.series = JSON.parse(JSON.stringify(res.data.data2));
        this.chartData_data4 = JSON.parse(JSON.stringify(res.data.data4));
        this.chartData_data2 = JSON.parse(JSON.stringify(res.data.data2));
        this.chartData_data5 = JSON.parse(JSON.stringify(res.data.data5));

      },
      onClickItem(e) {
        if (this.current !== e.currentIndex) {
          this.current = e.currentIndex
        }
      },
      styleChange(e) {
        if (this.styleType !== e.detail.value) {
          this.styleType = e.detail.value
        }
      },
      colorChange(e) {
        if (this.styleType !== e.detail.value) {
          console.log(e.detail.value);
          this.activeColor = e.detail.value
        }
      }
    }
  };
</script>

<style lang="scss">
  /* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
  .content {
    width: 90%;
    align-items: center;
    justify-content: center;

    .charts-box {
      width: 100%;
      height: 300px;
      // padding: 30px 10px;
    }

    .charts-box2 {
      width: 100%;
      height: 300px;
      // padding: 30px 10px;
    }
  }
</style>
